<template>
  <div class="Member">
    <el-container>
      <el-header>会员等级</el-header>
      <el-main>
        <el-header style="display: flex">
          状态：
          <el-select
            v-model="value"
            clearable
            placeholder="请选择"
            @change="zhen"
          >
            <el-option label="显示" value="1"></el-option>
            <el-option label="隐藏" value="0"></el-option>
          </el-select>
          等级名称：
          <div style="width: 180px">
            <el-input value="" placeholder="请输入内容"></el-input>
          </div>
        </el-header>
        <el-header
          ><el-button type="primary" @click="form.type = true"
            ><i class="el-icon-plus"></i>添加会员等级</el-button
          ></el-header
        >
        <el-main style="background-color: white">
          <el-table :data="tableData" style="width: 100%,height:100%">
            <el-table-column prop="id" label="ID" min-width="150">
            </el-table-column>

            <el-table-column prop="icon" label="等级图标" min-width="150">
              <template slot-scope="scope">
                <img :src="scope.row.icon" alt="" />
              </template>
            </el-table-column>

            <el-table-column prop="name" label="等级名称" min-width="150">
            </el-table-column>

            <el-table-column prop="grade" label="等级" min-width="150">
            </el-table-column>

            <el-table-column prop="discount" label="享受折扣" min-width="150">
            </el-table-column>

            <el-table-column prop="is_show" label="是否显示" min-width="150">
              <template slot-scope="scope">
                <p v-if="scope.row.is_show==1">显示</p>
                <p v-else-if="scope.row.is_show==0">隐藏</p>
              </template>
            </el-table-column>

            <el-table-column prop="explain" label="等级说明" min-width="150">
            </el-table-column>

            <el-table-column fixed="right" label="操作" min-width="120">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handleDel(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :page="page"
            :page-size="pagesize"
            :total="total"
            :current-page="pagew"
            @current-change="pages"
          >
          </el-pagination>
        </el-main>
      </el-main>
    </el-container>

    <!-- 模态框 -->
    <MemberModel :data-list="form" @add="tian" @edit="bian"></MemberModel>
  </div>
</template>

<script>
import { MemberTable, MemberAdd, MemberDel } from "../api/index";
import MemberModel from "../components/MemberModel";
export default {
  components: {
    MemberModel,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      pagesize: 15,
      pagew: 1,
      is_show: "",
      form: {
        text: "添加会员等级",
        type: false,
        name: "",
        grade: "",
        discount: "",
        exp_num: "",
        icon: "",
        image: "",
        is_show: "",
        explain: "",
      },
      value: "",
    };
  },
  created() {
    MemberTable({ is_show: this.is_show, page: 1, limit: this.pagesize }).then(
      (res) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.count;
      }
    );
  },

  methods: {
    handleDel(val) {
      MemberDel({ id: val.id }).then((res) => {
        if (res.data.status == 200) {
           this.$message({
          message: res.data.msg,
          type: 'success'
        });
          MemberTable({
            is_show: this.is_show,
            page: 1,
            limit: this.pagesize,
          }).then((res) => {
            this.tableData = res.data.data.list;
            this.total = res.data.data.count;
          });
        }
        else{
          this.$message({
          message: res.data.msg,
          type: 'error'
        });
        }
      });
    },
    zhen(val) {
      this.is_show = val;
      MemberTable({
        is_show: this.is_show,
        page: 1,
        limit: this.pagesize,
      }).then((res) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.count;
      });
    },
    bian(val) {
    },
    tian(val) {
      this.form.type = false;
      MemberAdd(val).then((res) => {
        if (res.data.status == 200) {
          this.$message({
          message: res.data.msg,
          type: 'success'
        });
          MemberTable({
            is_show: this.is_show,
            page: 1,
            limit: this.pagesize,
          }).then((res) => {
            this.tableData = res.data.data.list;
            this.total = res.data.data.count;
          });
        }else{
          this.$message({
          message: res.data.msg,
          type: 'error'
        });
        }
      });
    },
    pages(val) {
      MemberTable({
        is_show: this.is_show,
        page: val,
        limit: this.pagesize,
      }).then((res) => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.count;
        this.pagew = val;
      });
    },
    handleClick(val) {
      this.form.text = "编辑会员等级";
      this.form.type = true;
      this.form.name = val.name;
      this.form.grade = val.grade;
      this.form.discount = val.discount;
      this.form.exp_num = val.exp_num;
      this.form.icon = val.icon;
      this.form.image = val.image;
      this.form.is_show = val.is_show;
      this.form.explain = val.explain;
      this.form.id = val.id;
    },
  },
};
</script>
<style lang='scss' scoped>
img {
  width: 36px;
  height: 36px;
}
.el-container {
  width: 100%;
  height: 100%;
}
.el-header,
.el-footer {
  background-color: white;
  color: #333;
  line-height: 60px;
}

.el-main {
  width: 100%;
  height: 100%;
  background-color: #b3c0d1;
  color: #333;
}
</style>